flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
1// src/routes/og/+server.ts
2import { getRecordByUri, type MainRecord } from '$lib/db';
3import { ImageResponse } from '@ethercorps/sveltekit-og';
4import { error, type RequestHandler } from '@sveltejs/kit';
5
6const template = (data: MainRecord) => {
7 return `
8<div tw="bg-zinc-900 flex flex-col w-full h-full items-center justify-center">
9 <div tw="flex absolute bottom-0 left-0 right-0 top-0 bg-sky-400">
10 <img src="https://image.tmdb.org/t/p/w780${data.record.metadata?.backdrop_path}" alt="" class="flex h-full w-full rounded-xl opacity-50" />
11
12 <div tw="flex absolute h-full w-full bg-black/80">
13 </div>
14 </div>
15 <div tw="flex flex-row w-full py-12 px-4 items-center justify-start p-8">
16 <div tw="flex h-auto aspect-[3/2] w-82">
17 <img src="https://image.tmdb.org/t/p/w500${data.record.metadata?.poster_path}" alt=""
18 class="flex h-full w-full rounded-xl border-2 border-zinc-800" style="border-radius: 16px; border-width: 1px; border-color: #3f3f46;" />
19 </div>
20
21 <div tw="flex flex-col text-7xl font-bold text-zinc-100 text-left px-8 max-w-3xl">
22 <div tw="flex items-center">
23 ${data.author.avatar ? `<img src=${data.author.avatar} tw="w-16 h-16 rounded-full" />` : ``}
24 <div tw="flex truncate text-4xl text-zinc-100 pl-4">
25 ${data.author.displayName || data.author.handle}
26 <span tw="flex truncate text-sky-500 pl-2">
27 reviewed
28 </span>
29 </div>
30 </div>
31
32 <span tw="flex tracking-tight mt-4">${data.record.metadata?.title}</span>
33
34 ${
35 data.record.rating
36 ? `<div tw="flex items-center mt-8">
37 <div tw="flex items-center">
38
39 ${new Array(5)
40 .fill(0)
41 .map(
42 (_, i) => `<svg
43 tw="w-20 h-20 flex ${i * 2 < (data.record.rating?.value ?? 0) - 1 ? 'text-sky-400' : 'text-zinc-600'}"
44 viewBox="0 0 24 24"
45 fill="currentColor">
46 <path
47 fill-rule="evenodd"
48 d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
49 clip-rule="evenodd"
50 />
51 </svg>`
52 )
53 .join('')}
54 </div>
55 </div>`
56 : ``
57 }
58 </div>
59 </div>
60
61 <div tw="flex text-4xl text-sky-400 items-end justify-end w-full px-6 pb-4">
62 <div tw="flex">
63 skywatched.app
64 </div>
65 </div>
66</div>`;
67};
68
69const host = import.meta.env.DEV ? 'http://localhost:5173' : 'https://skywatched.app';
70const fontPath = `fonts/inter-latin-ext-400-normal.woff`;
71const fontFile = await fetch(`${host}/${fontPath}`);
72const fontData: ArrayBuffer = await fontFile.arrayBuffer();
73
74export const GET: RequestHandler = async ({ params }) => {
75 const uri = params.uri;
76
77 if (!uri) {
78 return error(404, 'Not found');
79 }
80
81 const record = await getRecordByUri({ uri });
82
83 return new ImageResponse(
84 template(record),
85 {
86 fonts: [
87 {
88 name: 'Inter Latin',
89 data: fontData,
90 weight: 400
91 }
92 ]
93 },
94 {}
95 );
96};